import { NavBar, List, Button, Avatar } from 'antd-mobile';
import { CloseCircleOutline, SetOutline, DeleteOutline } from 'antd-mobile-icons';
import styles from './Mine.module.scss';
import { useNavigate } from 'react-router-dom';
import { fetchUserInfo, clearUserInfo } from '@/store/modules/user'
import { useDispatch, useSelector } from 'react-redux';

function Mine() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    return (
        <div className={styles.container}>

            <div className={styles.userinfo}>
                <Avatar src="https://randomuser.me/api/portraits/men/1.jpg" style={{ '--size': '50px', '--border-radius': '50%' }} />
                <div className={styles.username}>John Doe</div>
            </div>

            <List>
                <List.Item prefix={<SetOutline />} onClick={() => {
                    console.log('document.documentElement.style', document.documentElement.style.getPropertyValue('--adm-color-primary'));
                    if (document.documentElement.style.getPropertyValue('--adm-color-primary') === 'blue') {
                        document.documentElement.style.setProperty('--adm-color-primary', 'rgb(105, 174, 120)');
                    } else {
                        document.documentElement.style.setProperty('--adm-color-primary', 'blue');
                    }
                }}>
                    主题设置
                </List.Item>
                <List.Item prefix={<DeleteOutline />} onClick={() => {
                    localStorage.setItem('mobile', '');
                }}>
                    清除缓存
                </List.Item>
            </List>


            <div className={styles.logout}>

                <Button block type="submit" color="danger" style={{width:'80%'}} onClick={() => {
                    dispatch(clearUserInfo());
                    navigate('/', { replace: true });
                }}>
                    退出登录
                </Button>

            </div>

        </div>
    );
}

export default Mine;
